<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="wukunyi">
    <title>注册</title>
    <link rel="stylesheet" href="/./css/bootstrap.css">
    <script src="/./js/jquery.js"></script>
    <script src="/./js/bootstarp.js"></script>
    <link rel="stylesheet" href="/./style/register.css">
    <style>

    </style>
</head>

<body>
    <div class="container-full container-nav">
        <div class="container container_regist">
            <div class="logo">
                <span class="logo_img"></span>
                <h3>欢迎注册</h3>
            </div>
            <div class="login">
                <span style="color:grey;">已有账号?</span>
                <a href="/api/login" style="color:black;">请登录</a>
            </div>
        </div>
    </div>
    <div class="container container_form">
        <form method="post" action="/api/register/user" name="form" id="form">
            <div class="item_user form_item">
                <label for="userName">用户名</label>
                <input type="text" name="userName" id="userName" placeholder="您的账户名和用户名" autocomplete="on" required pattern="^[\u4E00-\u9FA5A-Za-z0-9_]{6,12}$">
            </div>
            <div class="user_tip form_tip">
                <span class="glyphicon glyphicon-exclamation-sign"></span>
                <span>支持中文、字母、数字、"-"、"_"的组合，4-20个字符</span>
            </div>
            <div class="item_psw form_item">
                <label for="psw">设置密码</label>
                <input type="password" name="psw" id="psw" placeholder="建议至少使用2种组合" maxlength="20" autocomplete="on" required>
            </div>
            <div class="psw_tip form_tip">
                <span class="glyphicon glyphicon-exclamation-sign"></span>
                <span>建议使用字母、数字和符号两种以上的组合，6-20个字符</span>
            </div>
            <div class="item_rePsw form_item">
                <label for="repsw">确认密码</label>
                <input type="password" name="repsw" id="repsw" placeholder="请再次输入密码" maxlength="20" autocomplete="on" required>
            </div>
            <div class="psw_tip form_tip">
                <span class="glyphicon glyphicon-exclamation-sign"></span>
                <span>请再次输入密码</span>
            </div>
            <div class="item_email form_item" style="display:none">
                <label for="email">邮箱验证</label>
                <input type="email" name="email" id="email" placeholder="建议使用常用邮箱" maxlength="20" autocomplete="on">
            </div>
            <div class="email_tip form_tip" style="display:none">
                <span class="glyphicon glyphicon-exclamation-sign"></span>
                <span>完成验证后，你可以使用该邮箱登录和找回密码</span>
                <a class="phone_auth">手机验证</a>
            </div>
            <div class="item_phone form_item">
                <label for="phone">手机号码</label>
                <input type="text" name="phone" id="phone" placeholder="建议使用常用手机" maxlength="20" autocomplete="on" required>
            </div>
            <div class="phone_tip form_tip">
                <span class="glyphicon glyphicon-exclamation-sign"></span>
                <span>完成验证后，你可以使用该手机登录和找回密码</span>
                <a class="emila_auth">邮箱验证</a>
            </div>
            <div class="item_auth form_item">
                <label for="auth">验证码</label>
                <input type="text" name="auth" id="auth" placeholder="请输入验证码" maxlength="20" autocomplete="on" required>
                <div class="auth"></div>
            </div>
            <div class="auth_tip form_tip">
                <span class="glyphicon glyphicon-exclamation-sign"></span>
                <span>看不清？点击图片更换验证码</span>
            </div>
            <div class="item_phone_auth form_item">
                <label for="phone_auth">手机验证码</label>
                <input type="text" name="phone_auth" id="phone_auth" placeholder="请输入手机验证码" maxlength="20" autocomplete="on" required>
            </div>
            <div class="phone_auth_tip form_tip">
            </div>
            <input class="submit" form="form" type="submit" value="立即注册">
        </form>
        <div class="border_right"></div>
        <div class="right_box">
            <div class="box_top">
                <i class="i-company"></i>
                <span>企业用户注册</span>
            </div>
            <div class="box_bottom">
                <div class="i-global"></div>
                <span>INTERNATIONAL<br>CUSTOMERS</span>
            </div>
        </div>
    </div>
    <div id="form-footer" class="footer container">
        <div class="links">
            <a rel="nofollow" target="_blank" href="//www.jd.com/intro/about.aspx"> 关于我们</a>|
            <a rel="nofollow" target="_blank" href="//www.jd.com/contact/">联系我们</a>|
            <a rel="nofollow" target="_blank" href="//zhaopin.jd.com/">人才招聘</a>|
            <a rel="nofollow" target="_blank" href="//www.jd.com/contact/joinin.aspx">商家入驻</a>|
            <a rel="no  follow" target="_blank" href="//www.jd.com/intro/service.aspx">广告服务</a>|
            <a rel="nofollow" target="_blank" href="//app.jd.com/">手机京东</a>|
            <a target="_blank" href="//club.jd.com/links.aspx">友情链接</a>|
            <a target="_blank" href="//media.jd.com">销售联盟</a>|
            <a href="//club.jd.com/" target="_blank">京东社区</a>|
            <a href="//gongyi.jd.com" target="_blank">京东公益</a>|
            <a target="_blank" href="//en.jd.com/" clstag="pageclick|keycount|20150112ABD|9">English Site</a>
        </div>
        <div class="copyright">
            Copyright©2004-2016&nbsp;&nbsp;京东JD.com&nbsp;版权所有
        </div>
    </div>
    <script>
       
        $('input').focus(function (e) {
            $(this).parent().next().children('span').css({
                display: 'inline-block'
            })
        })
        $('input').blur(function (e) {
            $(this).parent().next().children('span').css({
                display: 'none'
            })
        })
        $('.emila_auth').click(function (e) {
            $('.email_tip,.item_email').css({
                display: 'flex'
            })
            $(this).css({
                display: 'none'
            })
            $('.phone_auth').css({
                display: 'inline-block'
            })
        })
        $('.phone_auth').click(function (e) {
            $('.email_tip,.item_email').css({
                display: 'none'
            })
            $(this).css({
                display: 'none'
            })
            $('.emila_auth').css({
                display: 'inline-block'
            })
        })
        function retStr() {
            var arr1 = [];
            for (var i = 0; i < 10; i++) {
                arr1.push(i)
            }
            var arr2 = [];
            for (var i = 97; i < 122; i++) {
                arr2.push(String.fromCharCode(i))
            }
            var arr = arr1.concat(arr2)
            var authArr = [];
            for (var i = 0; i < 4.; i++) {
                var randomNum = Math.floor(Math.random() * (arr.length - authArr.length));
                authArr.push(arr[randomNum]);
                arr.splice(randomNum, 1);
            }
            var str = String(authArr).replace(/[',']/g, '');
            return str;
        }
        $('.auth').click(function (e) {
            $(this).html(retStr());
        }).html(retStr());
        $('#form').submit(function (e) {
            e.preventDefault();
            var auth = $('.auth').text();
            var myauth = $('#auth').val();
            if (auth == myauth) {
                $.post(this.action, $(this).serialize(), function (data) {
                    alert(data.message);
                    if (data.code == 'success') {
                        location.href = "/api/login"
                    }
                })
            }
            else {
                alert('验证码不正确,请重新输入验证码');
            }
        })
    </script>
</body>
<html>